<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Border</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>

<body>

 <h1>Border</h1>
 <div id="before"><h2>Before</h2><div class="parent">
   
   <span  class="static-inline-shrinkwrapped box" >Static Inline Shrinkwrapped <br />Element</span>

   <div   class="spacer" ></div>

   <img   class="replaced-inline-shrinkwrapped box" src="star.gif" alt="" />
   <img   class="replaced-inline-sized box"         src="star.gif" alt="" />
   <span  class="sized">
    <img  class="replaced-inline-stretched box"     src="star.gif" alt="" /></span>
   
   <div   class="spacer" ></div>

   <div   class="static-block-sized box"     >Static Block Sized</div>
   <div   class="static-block-stretched box" >Static Block Stretched Auto</div>

   <div   class="spacer" ></div>
   
   <table class="table-shrinkwrapped box"    ><tr><td>Table Shrinkwrapped</td></tr></table>
   <table class="table-sized box"            ><tr><td>Table Sized</td></tr></table>
   <table class="table-stretched box"        ><tr><td>Table Stretched 100%</td></tr></table>

   <div   class="spacer" ></div>
   
   <span  class="float-shrinkwrapped box"    >Float Shrinkwrapped</span>
   <span  class="float-sized box"            >Float Sized</span>
   <span  class="float-stretched box"        >Float Stretched 100%</span>

   <span  class="absolute-shrinkwrapped box" >Absolute Shrinkwrapped</span>
   <span  class="absolute-sized box"         >Absolute Sized</span>
   <span  class="absolute-stretched box"     >Absolute Stretched Auto</span>
 </div></div>
 
 <!-- Identical code to the previous with the addition of the after class -->
 
 <div id="after"><h2>After</h2><div class="parent">
   
   <span  class="static-inline-shrinkwrapped box after" >Static Inline Shrinkwrapped <br />Element </span>

   <div   class="spacer" ></div>

   <img   class="replaced-inline-shrinkwrapped box after" src="star.gif" alt="" />
   <img   class="replaced-inline-sized box after"         src="star.gif" alt="" />
   <span  class="sized">
    <img  class="replaced-inline-stretched box after"     src="star.gif" alt="" /></span>
   
   <div   class="spacer" ></div>

   <div   class="static-block-sized box after"     >Static Block Sized</div>
   <div   class="static-block-stretched box after" >Static Block Stretched Auto</div>

   <div   class="spacer" ></div>
   
   <table class="table-shrinkwrapped box after"    ><tr><td class="1after" >Table Shrinkwrapped</td></tr></table>
   <table class="table-sized box after"            ><tr><td class="1after" >Table Sized</td></tr></table>
   <table class="table-stretched box after"        ><tr><td class="1after" >Table Stretched 100%</td></tr></table>

   <div   class="spacer" ></div>
   
   <span  class="float-shrinkwrapped box after"    >Float Shrinkwrapped</span>
   <span  class="float-sized box after"            >Float Sized</span>
   <span  class="float-stretched box after"        >Float Stretched 100%</span>

   <span  class="absolute-shrinkwrapped box after" >Absolute Shrinkwrapped</span>
   <span  class="absolute-sized box after"         >Absolute Sized</span>
   <span  class="absolute-stretched box after"     >Absolute Stretched Auto</span>
 </div></div>

</body>
</html>
